<template>
  <el-container style="height: 100%;">
    <!-- 侧边栏容器 -->
    <el-aside width="auto">
      <!-- 侧边栏组件 -->
      <AsideShow></AsideShow>
    </el-aside>
    <el-container>
      <el-header class="header">
        <!-- 头部容器 -->
        <HeaderShow></HeaderShow>
      </el-header>
      <!-- 公共标签组件 -->
      <CommonTag></CommonTag>
      <el-main class="ma">
        <!-- 主体内容容器 -->
        <router-view></router-view>
        <!-- 路由视图 -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import AsideShow from './AsideShow.vue' // 导入侧边栏组件
import HeaderShow from './HeaderShow.vue' // 导入头部组件
import CommonTag from './CommonTag.vue' // 导入公共标签组件

export default {
  name: 'MainShow',
  components: {
    AsideShow, // 注册侧边栏组件
    HeaderShow, // 注册头部组件
    CommonTag // 注册公共标签组件
  }
}
</script>

<style scoped>
.header {
  background-color: #333; /* 头部背景颜色 */
}

.ma {
  padding-top: 20px; /* 主体内容上边距 */
}
</style>